<template>
	<div class="container">
		<h2 style="margin-left:4%">添加</h2>
		<div class="banners">
			<div class="leftBox">
				<el-form :model="formData" label-position="left" :rules="rules" ref="myForm">
					<el-form-item label="门店名称:" prop="outletName">
						<el-input v-model="formData.outletName" placeholder="请输入门店名称"></el-input>
					</el-form-item>
					<el-form-item label="负责人" prop="adminName">
						<el-select v-model="formData.adminName" placeholder="请选择">
							<el-option v-for="item in optionsList" :key="item.value" :label="item.adminName"
								:value="item.adminId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="营业时间:" prop="outletOpenTime">
						<el-time-picker is-range format="HH:mm" value-format="HH:mm" v-model="formData.outletOpenTime"
							range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
						</el-time-picker>
					</el-form-item>
					<el-form-item label="联系方式:" prop="outletPhone">
						<el-input v-model="formData.outletPhone" placeholder="请输入联系方式"></el-input>
					</el-form-item>
					<el-form-item label="门店地址:" prop="outletAddress">
						<el-cascader placeholder="请选择门店地址" v-model="formData.outletAddress" :options="options2"
							@change="ChangeAddress"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址:" prop="detailAddress">
						<el-input placeholder="请输入详细地址" v-model="formData.detailAddress"></el-input>
					</el-form-item>
					<el-form-item label="备注:" prop="outletDescr">
						<el-input v-model="formData.outletDescr" placeholder="请输入备注信息"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<label for style="font-size: 16px;">门店logo:</label>
			<el-upload action="http://192.168.16.199:8081/outlets/addLogo"
				:on-change="ImgChange" :on-error="handleError" class="avatar-uploader"
				:before-upload="beforeAvatarUpload" ref="upload">
				<img class="avatar" :src="imgUrl" slot="trigger" v-if="imgUrl">
				<i slot="trigger" class="el-icon-plus avatar-uploader-icon" v-else></i>
			</el-upload>


		</div>
		<div class="footer">
			<el-button type="primary" class="sure" @click="homeAdd('myForm')">确定</el-button>
			<el-button type="info" @click="downPage">取消</el-button>
		</div>
	</div>
</template>
<script>
	import {
		codeToText,
		regionData
	} from 'element-china-area-data'
	export default {
		data() {
			return {
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				imgUrl: "",
				image: "",
				myData: {},
				myFile: {},
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				optionsList: [],
				value: '',
				//省市级
				options2: regionData,
				address: [],
				
				formData: {
					outletName: "",
					adminName: "",
					outletOpenTime: "",
					outletPhone: "",
					outletAddress: [],
					outletDescr: "",
					detailAddress: "",
				},
				rules: {
					outletName: [{
						required: true,
						message: '门店名称不能为空',
						trigger: 'blur'
					}],
					adminName: [{
						required: true,
						message: '负责人不能为空',
						trigger: 'change'
					}],
					outletOpenTime: [{
						required: true,
						message: '营业时间不能为空',
						trigger: 'change',

					}],
					outletPhone: [{
							required: true,
							message: '请填写联系方式',
							trigger: 'blur'
						},
						{
							pattern: /^\d{11}$/,
							message: '请输入11位数字',
							trigger: 'blur'
						}
					],
					outletAddress: [{
						required: true,
						message: '门店地址不能为空',
						trigger: 'change'
					}],
					detailAddress: [{
						required: true,
						message: '详细地址不能为空',
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			//负责人
			admin() {
				this.$http.post(this.baseUrl + "outlets/getAdminNames", {}).then(res => {
					if (res.data.code == 200) {
						//console.log(res)
						this.optionsList = res.data.data.admins
					}else{
						this.$message.error(res.data.msg)
					}
					
				})
			},
			//省市级
			ChangeAddress(value) {
				this.address = codeToText[this.formData.outletAddress[0]] + '' + codeToText[this.formData.outletAddress[
					1]] + '' + codeToText[this.formData.outletAddress[2]]
				//console.log(this.address)
			},
			//上传失败
			handleError(err, file, filelist) {
				this.$message({
					message: '上传失败！',
					type: 'error'
				});
				//console.log(err);
			},
			//上传前
			beforeAvatarUpload(file) {
				const isJPG = (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png" || file
					.type == "image/gif");
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			ImgChange(file, fileList) {
				if (file.response != undefined) {
					this.image = file.response.msg
					// console.log(this.image)
				}
				this.imgUrl = URL.createObjectURL(file.raw);
			},
			//返回
			downPage() {
				this.$router.go(-1)
			},
			//添加
			homeAdd(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						if (this.imgUrl != "") {
							var opentime = this.formData.outletOpenTime.toLocaleString()
							this.$http.post(this.baseUrl + "outlets", {
								outletLogo: this.image,
								adminId: this.formData.adminName,
								outletName: this.formData.outletName,
								outletOpenTime: opentime,
								outletPhone: this.formData.outletPhone,
								outletAddress: this.address + this.formData.detailAddress,
								outletDescr: this.formData.outletDescr,
							}).then(res => {
								//console.log(res)
								if (res.data.code == 200) {
									this.$message.success("门店添加成功")
									this.$router.push("/")
								} else {
									this.$message.error(res.data.msg)
								}
							})
						} else {
							this.$message.error('请添加图片');
						}
					} else if(this.imgUrl==""){
						this.$message.error('请添加图片')
					}

				})
			}
		},
		mounted() {
			this.admin()
		}
	}
</script>
<style lang="less">
	.container {
		height: 90vh;
		.avatar-uploader .el-upload {
			border-radius: 10px;
			border: 2px solid #d9d9d9;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 150px;
			height: 150px;
			line-height: 150px;
			text-align: center;
		}
		.avatar {
			width: 150px;
			height: 150px;
			display: block;
		}
	
		.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
		.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
			content: '';
			margin-right: 0;
		}
	
		.el-upload--picture-card {
			border: 2px solid #ccc;
			margin-left: 5px;
			margin-top: 5px;
		}
		.banners {
			margin-left: 50px;
			margin-top: 3%;
			width: 80%;
			display: flex;
			.el-form-item__label {
				font-size: 16px;
				width: 100px;
				color: #333
			}
			.leftBox {
				display: flex;
				width: 50%;
			}
		}
		.el-form-item__content {
			display: flex;
			width: 50%;
		}
		.footer {
			margin-top: 80px;
			width: 50vw;
			.el-button {
				width: 15%;
				height: 45px;
				font-size: 17px;
				border-radius: 6px;
			}
			.el-button:nth-of-type(1) {
				margin-left: 20%;
				color: #fff;
			}
	
			.el-button:nth-of-type(2) {
				margin-left: 40px;
				background: #e8e8e8;
				color: #333;
				border: none
			}
		}
	}
</style>